<template>
    <div>
        <el-dialog
          class="eldlong"
          title="新增机构"
          :visible.sync="addlong"
          :show-close="false"
           width="50%"
           @close='close'
          :close-on-click-modal="false"
          >
          <el-form ref="form"  :rules="rules" :model="addform" label-width="100px">
             <el-form-item prop="org_name" label="机构名称：">
               <el-input v-model="addform.org_name"></el-input>
             </el-form-item>
             <el-form-item prop="address" label="地址：">
               <!-- <el-input v-model="addform.address"></el-input> -->
             </el-form-item>
             <el-row type="flex">
                 <el-col>
                    <el-form-item prop="username" label="负责人姓名：">
                       <el-input v-model="addform.username"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item prop="mobile" label="负责人电话：">
                          <el-input v-model="addform.mobile"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
              <el-form-item  prop="identification" label="连锁机构：">
               <el-input v-model="addform.identification"></el-input>
             </el-form-item>
               <el-row type="flex">
                 <el-col>
                    <el-form-item prop="admin_user" label="账号：">
                       <el-input v-model="addform.admin_user"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item prop="password" label="密码">
                          <el-input v-model="addform.password"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
               <el-row type="flex">
                 <el-col>
                    <el-form-item prop="wx_appid" label="小程序ID：">
                       <el-input v-model="addform.wx_appid"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item prop="wx_appsecret" label="APPscret：">
                          <el-input v-model="addform.wx_appsecret"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
               <el-row type="flex">
                 <el-col>
                    <el-form-item prop="wx_mpid" label="商户号：">
                       <el-input v-model="addform.wx_mpid"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item prop="wx_key" label="支付key：">
                          <el-input v-model="addform.wx_key"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
             <el-form-item prop="wx_logo" label="Logo：">
                <el-upload
                   action="http://202.102.249.191:84/beautiful/store/file"
                   list-type="picture-card"
                   :on-success="okupload"
                   :limit="1"
                   >
                   <i class="el-icon-plus"></i>
                 </el-upload>
              </el-form-item>
          </el-form>
          <!-- <span  class="dialog-footer"> -->
              <el-row type="flex" justify="center">
                    <el-button  type="info" class="btn" @click="detbtn">取 消</el-button>
                    <el-button  class="addbtn" @click="okbtn">确 定</el-button>
              </el-row>
          <!-- </span> -->
        </el-dialog>
    </div>
</template>
<script>
import {addjigou,diqulist} from "/src/api/menu/index.js"
export default {
    name:'menudlong',
    props:{
        addlong:{
            type:Boolean
        }
    },
    data(){
        return {
            rules:{
              org_name:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              address:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              username:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              mobile:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              identification:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              admin_user:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              password:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              wx_appid:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              wx_mpid:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              wx_key:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              //  wx_logo:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
               wx_appsecret:[{required: true, message: '请选择活动资源', trigger: 'blur'}]
            },
            addform:{
                 org_name:"123",//机构名称
                 address:'',//机构详细地址
                 username:'',//负责人姓名
                 mobile:'',//负责人手机号码
                 identification:'',//机构代码
                 admin_user:'',//机构管理账号
                 password:'',//机构管理密码
                 wx_appid:'',//微信小程序ID
                 wx_appsecret:'',//appsecret
                 wx_mpid:'',//商户ID
                 wx_key:'',//支付key
                 wx_logo:''//logo图片
            }
        }
    },
    methods:{
        //点击取消触发
        detbtn(){
            this.$parent.breadcrumbList =[{name:"机构管理"},{name:"连锁机构"}]
            this.$emit('update:addlong',false)
        },
        //点击确定触发
       async  okbtn(){
         this.$refs.form.validate(async val=>{
           if(val){
             var data = await addjigou(this.addform) 
               if(data.code == 200){
               this.$parent.getjigou()
               this.$message({
                 message: '添加成功', 
                 type: 'success'
               })
               }else {
                this.$message.error('失败')
                this.$emit('update:addlong',false)
               }
           }else{
             console.log(666);

           }
         })
          // var data = await addjigou(this.addform)
          //   if(data.code == 200){
          //      this.$parent.getjigou()
          //      this.$message({
          //        message: '添加成功',
          //        type: 'success'
          //      });
          //   }else {
          //     this.$message.error('失败')
          //   this.$emit('update:addlong',false)
          //   }
        },
        //图片上传前检车
        beforeAvatarUpload(){},
        // 上传成功后执行
        okupload(val){
          this.addform.wx_logo =val.data
        },
        //关闭弹窗的回调
        close(){
          this.addform={
                 org_name:"",//机构名称
                 address:'',//机构详细地址
                 username:'',//负责人姓名
                 mobile:'',//负责人手机号码
                 identification:'',//机构代码
                 admin_user:'',//机构管理账号
                 password:'',//机构管理密码
                 wx_appid:'',//微信小程序ID
                 wx_appsecret:'',//appsecret
                 wx_mpid:'',//商户ID
                 wx_key:'',//支付key
                 wx_logo:''//logo图片
            }
           this.$refs.form.resetFields()
        },
    },
    async created(){
      console.log(666);
      // const data = await this.diqulist()
      // console.log(data);

    }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
   background-color: #009380!important;
}
.eldlong {
    padding: 0 50px;
    .btn {
        color: #333333;
    }
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>